<template>
	<view class="disposalRecords">
		<!-- 处置记录 -->
		<navBar title="处置记录"></navBar>

		<view scroll-y="true" class="hwq-scroll-box disposalRecordsBox">
			<view class="content">
				<view class="item" v-for="item in activities" :key="item.id">
					<view class="header">
						<!-- <image class="avatar" :src="item.userPhoto" mode="" ></image> -->
						<view class="user">
							<view class="username">{{item.creator|| "险情上报" }}</view>
							<view class="time">{{item.time||""}}</view>
						</view>
					</view>
					<view class="text">{{ item.content }}</view>
					<view class="imgList">
						<image class="image" v-for="(item1,index) in item.imgList" :key="index" :src="item1" mode="" @click="clickImage(item1)"></image>
					</view>
					<view class="imgList" style="margin-top: 30rpx;">
						<video class="video" v-for="(item1,index) in item.videoList" :key="index" :src="item1" mode="" :controls="true" 
						:autoplay="false" :show-progress="false" :show-bottom-progress="false" object-fit="cover"></video>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEventRecordList
	} from '@/api/emergency/emergencyDispatch.js'
	import {
		attachList
	} from '@/api/bigPage/controls.js'
	export default {
		name: "disposalRecords",
		data() {
			return {
				activities: [],
			}
		},
		onLoad(option) {
			this.eventId = option.id
			this.getData()
		},
		methods: {
			//点击图片
			clickImage(url){
						let param={
							urls:[url]
						}
						uni.previewImage(param)
			},
			// 转换日期 获得年月日
			getDate(date) {
				if (!date) return ''
				var d = new Date(date)
				const y = d.getFullYear()
				let m = d.getMonth() + 1
				let did = d.getDate()
				let h = d.getHours()
				if (m < 10) {
					m = '0' + m
				}
				if (did < 10) {
					did = '0' + did
				}
				if (h < 10) {
					h = '0' + h
				}
				let minute = d.getMinutes()
				if (minute < 10) {
					minute = '0' + minute
				}
				let second = d.getSeconds()
				if (second < 10) {
					second = '0' + second
				}
				return y + '-' + m + '-' + did + ' ' + h + ':' + minute + ':' + second
			},
			// 查询上传处置记录
			getData() {
				getEventRecordList({
						currPage: 1,
						pageSize: 10000,
						params: {
							eventId: this.eventId
						},
					})
					.then(data => {
						if (data.success && data.status === 1) {
							this.activities = data.result.list || []
							for (const item of this.activities) {
								item.time = this.getDate(item.recordCreateDate)
								item.userPhoto=this.$config.IMG_FILE_URL + item.photo
								if (!item.docId) continue
								attachList({
									docId: item.docId
								}).then(data => {
									if (data.success && data.status === 1) {
										if (data.result.length > 0) {
											const list = []
											const list2 = []
											for (const ite of data.result) {
												// console.log(ite.contentType,ite.contentType.split("/")[0])
												if(ite.contentType.split("/")[0]=== "image"){
													list.push(this.$config.IMG_FILE_URL + ite.fileName)
												}
												if(ite.contentType.split("/")[0]=== "video"){
													list2.push(this.$config.VIDEO_URL + ite.fileName)
												}
											}
											this.$set(item, 'imgList', list)
											this.$set(item, 'videoList', list2)
											// console.log(this.activities)
										}
									}
								})
							}
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.disposalRecords {
		background-color: #F5F7FA;
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		.disposalRecordsBox{
			// height: ;
			// overflow: scroll;
		}
		
		.content {
			padding: 10rpx 30rpx;
		}

		.item {
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			background-color: #FFFFFF;
			padding: 35rpx 28rpx;
			margin-bottom: 30rpx;

			.header {
				display: flex;
				align-items: center;
				height: 84rpx;
				margin-bottom: 30rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
					border-radius: 50rpx;
					margin-right: 26rpx;
				}

				.user {
					flex: 1;

					.username {
						color: #22204E;
						font-size: 28rpx;
					}

					.time {
						margin-top: 5rpx;
						color: #6A819E;
						font-size: 20rpx;
						color: #6A819E;
					}
				}
			}

			.text {
				font-size: 28rpx;
				font-weight: 500;
				color: #36355C;
				line-height: 42rpx;
				margin-bottom: 23rpx;
			}

			.imgList {
				.image {
					width: 200rpx;
					height: 174rpx;
					margin-right: 10rpx;
					margin-top: 5rpx;
				}
				.video{
					width: 480rpx;
					height: 174rpx;
					margin-top: 20rpx;
					margin-right: 10rpx;
					margin-top: 5rpx;
				}
			}
		}
	}
</style>
<style scoped>
	.hwq-content {
		padding: 0;
	}
</style>
